import React from "react";
import ReactDOM from "react-dom";
import { Modal } from "antd";
import Iframe from "react-iframe";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";

const url = `${process.env.PUBLIC_URL}/mobile.html`;
export default class PreviewModal extends React.Component {

  componentDidUpdate() {
    const iframe = ReactDOM.findDOMNode(document.getElementById("Iframe"));
    const { value = {} } = this.props;
    if (iframe) {
      const data = JSON.stringify(value);
      iframe.contentWindow.postMessage(data);
    }
  }

  onLoad = () => {
    const iframe = ReactDOM.findDOMNode(document.getElementById("Iframe"));
    const { value = {} } = this.props;
    if (iframe) {
      const data = JSON.stringify(value);
      iframe.contentWindow.postMessage(data);
    }
    return true;
  };

  render() {
    const { onClose, visible } = this.props;
    return (
      <Modal
        // bodyStyle={{ height: 848 }}
        width="448px"
        height= "848px"
        style={{
          top: '2vh',
        }}
        footer={null}
        onCancel={onClose}
        visible={visible}
        title={<FormattedMessage {...messages.preview} />}
      >
        <Iframe
          id="Iframe"
          onLoad={this.onLoad}
          url={url}
          width="400px"
          height="800px"
        />
      </Modal>
    );
  }
}
